<template>
  <div class="selectCompany">
    <!---->
    <p-input @click="openModal" placeholder="请点击选择部门" v-model="departId"  :disabled="disabled" class="selectCompanyFile">
      <p-icon slot="prefix" type="cluster" title="部门选择控件"/>
      <p-icon v-if="departName" slot="suffix" type="close-circle" @click="handleEmpty" title="清空"/>
    </p-input>
    
    <p-input @click="openModal" placeholder="请点击选择部门" v-model="departName"  :disabled="disabled" class="selectCompanyshow">
      <p-icon slot="prefix" type="cluster" title="部门选择控件"/>
      <p-icon v-if="departName" slot="suffix" type="close-circle" @click="handleEmpty" title="清空"/>
    </p-input>

    <j-select-depart-modal
      ref="innerDepartSelectModal"
      :modal-width="modalWidth"
      :multi="multi"
      :rootOpened="rootOpened"
      :depart-id="departName"
      @ok="handleOK"
      :depart-init="departInit"
      :level = "level"
     />

  </div>
</template>

<script>
  import JSelectDepartModal from './modules/JSelectDepartModalQm'
   import { getAction } from '@/api/manage'
  export default {
    name: 'JSelectDepart',
    components:{
      JSelectDepartModal
    },
    props:{
      modalWidth:{
        type:Number,
        default:500,
        required:false
      },
      multi:{
        type:Boolean,
        default:false,
        required:false
      },
      rootOpened:{
        type:Boolean,
        default:true,
        required:false
      },
      value:{
        type:String,
        required:false
      },
      departName:{
        type:String,
        default:'',
        required:false
      },
      disabled:{
        type: Boolean,
        required: false,
        default: false
      },
      // 自定义返回字段，默认返回 id
      customReturnField: {
        type: String,
        default: 'id'
      },
      depart:{
        type: String,
      }
      ,
      departInit:{
        type: String,
        default:'',
        required:false
      },
      level:{
        type: Number,
        default:4,
        required:false
      }
    },
    data(){
      return {
        visible:false,
        confirmLoading:false,
        departId:"",
        departName:'',
        companyname:this.depart
      }
    },
    mounted(){
      this.departName = this.value
    },
    watch:{
      depart:{
        handler(val){
          this.companyname = val
        },
        deep: true,
    　　immediate: true
      },
      value:{
        handler(val) {
          if(val){
            this.departId = val
            this.departName = val +  '\xa0\xa0' + this.companyname 
          }else{
            this.departId = ''
            this.departName = ''
          }
    　　},
        deep: true,
    　　immediate: true
      },
    },
    methods:{
     getByCode(code){
        return getAction("/poros-permission/secOrg/getByCode/"+code,{}).then(res=>{
          if(res.success){
            return res.data.name
          }else{
            this.$message.warning(res.msg)
          }
        })
      },  
      openModal(){
        this.$refs.innerDepartSelectModal.show()
      },
     
      handleOK(rows, idstr) {
        let value = ''
        if (!rows && rows.length <= 0) {
          this.departId = ''
          this.departName = ''
        } else {
          value = idstr
          this.departId = idstr
          this.companyname = rows[0].name
          this.departName = rows[0].name + '('+idstr+')'
        }
        this.$emit("change", value)
      },
      getDepartNames(){
        return this.departId
      },
      handleEmpty(){
        this.handleOK('')
      }
    },
    model: {
      prop: 'value',
      event: 'change'
    }
  }
</script>

<style scoped>
 .selectCompany{
   position: relative;
 }
 .selectCompanyFile{
   position: absolute;
   top: 0;
   left: 0;
   z-index: 0;
 }
 .selectCompanyshow{
   position: absolute;
   top: 0;
   left: 0;
   z-index: 2;
 }
</style>